

<template>
	<div>
		<nav>
            <a class="nav-zuo" href="">
                <i class="fa fa-angle-left"></i>
            </a>
                <i class="fa fa-search" ></i>
                <input type="text" v-model="sousou">
        </nav>
		<div class="sortlist">
			<ul>
                <li v-for="dtaa in soudata">
                    <a :href="`#/xiang/${dtaa._id}`">
                         <div v-for="pict in dtaa.productImage"  class="img">
                            <img :src="`http://localhost:2222/images/photos/${dtaa.productImage}`" alt="">
                        </div>
                        <p class="p">{{dtaa.name}}</p>
                        <div class="div">
                            ¥ {{dtaa.yuanPrice}}
                            <span>¥{{dtaa.price}}</span>
                            <a href="" @click.prevent="addcar" :target="`${dtaa._id}`" class="fa fa-shopping-cart">
                            </a>
                        </div>
                    </a>
                </li>
            </ul>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data:function(){
			return {
                sousou:'',
                soudata:[],
			}
		},
        mounted:function(){
            var that = this
            $('input').keydown(function(){
                let sou = that.sousou
                console.log(sou)
                axios.post('los/sousou',{sou:sou}).then(function(result){
                    // console.log(result.data.message);
                    that.soudata = result.data.message
                    console.log(that.soudata);
                }).catch(function(err){
                    console.log('shiabi');
                })
            })
        },
		methods:{
			addcar:function(ev){
            console.log(ev.currentTarget.target)
            var ha = ev.currentTarget.target;
            console.log(ha)
            axios.post('los/addcart',{shop_id:ha}).then(function(result){
                console.log(result);
                alert('已经添加至购物车')
            }).catch(function(err){
                console.log(err);
            })
        },
		}
	}
	
	
</script>

<style scoped>
	.sortlist{
        margin-top: 60px;
        padding: 10px 15px;
    }
	
    nav{
        padding: 0 15px;
        text-align: center;
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        z-index: 666;
        /*overflow: hidden;*/
        line-height: 45px;
        font-size: 16px;
        color: #fff;
        border-bottom: 1px solid #ccc;
        background:#5494d4;
    }
    nav >  i{
        position: absolute;
        left: 60px;
        top: 15px;
        font-size: 16px;
        color: #666;
        z-index: 888;
    }
    nav > input{
        display: inline-block;
     width: 80%;   
     height: 28px;
     background: #fff;
     font-size: 14px;
     padding-left: 25px;
     border-radius: 3px;
     border: 1px solid #ddd;
     position: relative;
     /*top: 8px;*/
    }
    nav > a{
        font-size: 30px;
        color: #fff;
    }
    .nav-zuo{
      float: left;
      margin-top: -2px;
    }
	


    .div{
        padding: 5px;
        color: #d7063b;
        position: relative;
    }
    .div span{
        color: #aaa;
        font-size: 14px;
        text-decoration:line-through
    }
    .div a{
        display: block;
        position: absolute;
        border: 1px solid #d7063b;
        bottom: 5px;
        right: 5px;
        width: 30px;
        height: 30px;
        color: #d7063b;
        font-size: 20px;
        padding: 4px;
        border-radius: 50%;
    }
    .p{
        padding: 0 5px;
        font-size: 14px;
        color: #333;
    }
    .img{
        
        height: 150px;
        text-align: center;
        padding-top: 20px;
    }
    .img img{
        width: 50%;
    }
  .sortlist ul{
    overflow: hidden;
  }
  .sortlist ul li{
    float: left;
    list-style: none;
  }
  .sortlist ul li{
      width: 50%;
      box-sizing: border-box;
      border: 0.1px solid #ccc;
  } 
</style>




















